<script setup>
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import dayjs from 'dayjs'
import LinkMan from '@/views/workOrder/components/LinkMan.vue'
import { handleFileData } from '@/utils/helper.js'

const { data } = defineProps({
  data: Object
})
</script>

<template>
  <div
    class="pl-12px py-16px pr-8px border-b-solid border-1px border-#F5F7FA last:border-b-0"
  >
    <h3 class="m-0 text-#1E2226 font-600 text-16px leading-16px">
      {{ data?.type === 'ADDITION' ? '补充处置记录' : '处置结果' }}
    </h3>
    <p class="text-#1E2226 text-16px leading-22px font-400 mt-12px mb-0">
      {{ data?.content }}
    </p>
    <div class="mt-6px" v-if="data?.attachment?.length">
      <FileList
        :files="handleFileData(data?.attachment) || []"
        :upload="false"
        :preview="true"
      />
    </div>
    <div class="py-12px" v-if="data?.type !== 'ADDITION' && data?.relateInfoList && data?.relateInfoList.length > 0">
      <DetailItem label="涉及对象" v-if="data?.relateInfoList.find((item)=>item.type === 'ENTERPRISE')">
        <div class="flex flex-wrap items-start">
          <template v-for="(item, index) in data?.relateInfoList">
            <span class="bg-#F5F7FA mt-4px mr-2 rounded-2px text-14px leading-20px px-4px flex" v-if="item.type === 'ENTERPRISE'" :key="index">{{ item.name }}</span>
          </template>
        </div>
      </DetailItem>
      <DetailItem label="涉及人员" v-if="data?.relateInfoList.find((item)=>item.type === 'USER')">
        <div class="flex flex-wrap items-start">
          <template v-for="(item, index) in data?.relateInfoList">
            <span class="bg-#F5F7FA mt-4px mr-2 rounded-2px text-14px leading-20px px-4px flex" v-if="item.type === 'USER'" :key="index">{{ item.name }}</span>
          </template>
        </div>
      </DetailItem>
    </div>
    <div class="mt-12px p-12px bg-#F5F7FA rounded-4px">
      <DetailItem label="处置单位" :content="data?.orgName" />
      <DetailItem label="处置人员">
        <LinkMan :user-mobile="data?.userMobile" :user-name="data?.userName"/>
      </DetailItem>
      <DetailItem
        label="处置时间"
        :content="
          data?.updateTime
            ? dayjs(data?.updateTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
        "
      />
      <DetailItem
        v-if="data?.type === 'HANDLE'"
        label="处置时长"
        :content="data?.spendingTimeStr"
      />
    </div>
  </div>
</template>

<style scoped lang="less"></style>
